*{
	margin: 0;
	padding:0;
}
/*内筒*/
.content{
	position: absolute;
	width: 300px;
	height: 300px;
	top: 50%;
	left: 50%;
	margin-top: -150px;
	margin-left: -150px;
}
/*3D魔方外盒子*/
.cubeBox{
	/*兼容谷歌*/
	-webkit-transform-style: preserve-3d; /*开启3D视图，这样才能看到3D的效果*/
	-webkit-transform-origin:151px 151px 0; /*旋转中心点，分别为 X、Y、Z轴上的位置*/
	-webkit-animation: rotate 30s infinite; /*设置动画，动画的名称，动画执行时间，动画执行次数*/
	/*兼容火狐*/
    -moz-transform-style: preserve-3d;
    -moz-transform-origin:151px 151px 0;
    -moz-animation: rotate 30s infinite; 
	/*兼容IE*/
   	-ms-transform-style: preserve-3d;
    -ms-transform-origin:151px 151px 0;
    -ms-animation: rotate 30s infinite; 
	/*原生*/
    transform-style: preserve-3d;
    transform-origin:151px 151px 0;
    animation: rotate 30s infinite; 
}
/*设置魔方每个面的样式*/
.cubeBox div{
	position: absolute;
	width: 302px;
	height: 302px;
	display: block;
	border-radius: 5%;
}
/*设置每个面里的小方块的显示样式*/
.first-surface div,
.second-surface div,
.third-surface div,
.fourth-surface div,
.fifth-surface div,
.sixth-surface div {
	width: 100px;
	height: 100px;
	position: absolute;
	border: 1px solid #999;
	border-radius: 10%;
	display: inline-block;
}
/*设置每个面里的小方块的颜色*/
.first-surface div{
	background-color: #8000FF;
}
.second-surface div{
	background-color: #FF80FF;
}
.third-surface div{
	background-color: #00FF80;
}
.fourth-surface div{
	background-color: #FF8000;
}
.fifth-surface div{
	background-color: #FF0000;
}
.sixth-surface div {
	background-color: #FFFF00;
}
/*设置每个面的旋转与平移*/
.first-surface{
	-webkit-transform: translateZ(151px);
    -moz-transform: translateZ(151px);
    -ms-transform: translateZ(151px);
	transform: translateZ(151px);
}
.second-surface{
	-webkit-transform: rotateX(-90deg) translateZ(151px);
    -moz-transform: rotateX(-90deg) translateZ(151px);
    -ms-transform: rotateX(-90deg) translateZ(151px);
	transform: rotateX(-90deg) translateZ(151px);
}
.third-surface{
	-webkit-transform: rotateX(90deg) translateZ(151px);
    -moz-transform: rotateX(90deg) translateZ(151px);
    -ms-transform: rotateX(90deg) translateZ(151px);
	transform: rotateX(90deg) translateZ(151px);
}
.fourth-surface{
	-webkit-transform: rotateZ(180deg) rotateY(180deg) translateZ(151px);
    -moz-transform: rotateZ(180deg) rotateY(180deg) translateZ(151px);
    -ms-transform: rotateZ(180deg) rotateY(180deg) translateZ(151px);
	transform: rotateZ(180deg) rotateY(180deg) translateZ(151px);
}
.fifth-surface{
	-webkit-transform: rotateY(-90deg)  translateZ(151px);
    -moz-transform: rotateY(-90deg)  translateZ(151px);
    -ms-transform: rotateY(-90deg)  translateZ(151px);
	transform: rotateY(-90deg)  translateZ(151px);
}
.sixth-surface{
	-webkit-transform: rotateY(90deg) translateZ(151px);
    -moz-transform: rotateY(90deg) translateZ(151px);
    -ms-transform: rotateY(90deg) translateZ(151px);
	transform: rotateY(90deg) translateZ(151px);
}
/*设置每个面里的小方块的位置*/
.cubeBox div div:nth-child(1) {}

.cubeBox div div:nth-child(2) {
    left: 100px;
}

.cubeBox div div:nth-child(3) {
    left: 200px;
}

.cubeBox div div:nth-child(4) {
    top: 100px;
}

.cubeBox div div:nth-child(5) {
    top: 100px;
    left: 100px;
}

.cubeBox div div:nth-child(6) {
    top: 100px;
    left: 200px;
}

.cubeBox div div:nth-child(7) {
    top: 200px;
}

.cubeBox div div:nth-child(8) {
    top: 200px;
    left: 100px;
}

.cubeBox div div:nth-child(9) {
    top: 200px;
    left: 200px;
}
/*设置兼容谷歌的动画*/
@-webkit-keyframes rotate {
	15% {
		-webkit-transform: rotateY(-135deg);
	}
	30% {
		-webkit-transform: rotateY(-90deg)rotateZ(135deg); 
	}
	45% {
		-webkit-transform: rotateY(225deg)rotateZ(135deg);
	}
	60% {
		-webkit-transform: rotateY(135deg)rotateX(135deg);
	}
	75% {
		-webkit-transform: rotateX(135deg)rotateY(225deg);
	}
	90% {
		-webkit-transform: rotateX(-135deg);
	}
	100%{
		-webkit-transform: rotate(0deg);
	}
}
/*设置兼容Firefox浏览器的动画*/
@-moz-keyframes rotate {
	15% {
		-moz-transform: rotateY(-135deg);
	}
	30% {
		-moz-transform: rotateY(-90deg)rotateZ(135deg); 
	}
	45% {
		-moz-transform: rotateY(225deg)rotateZ(135deg);
	}
	60% {
		-moz-transform: rotateY(135deg)rotateX(135deg);
	}
	75% {
		-moz-transform: rotateX(135deg)rotateY(225deg);
	}
	90% {
		-moz-transform: rotateX(-135deg);
	}
	100%{
		-moz-transform: rotate(0deg);
	}
}
/*设置兼容ie浏览器的动画*/
@-ms-keyframes rotate {
	15% {
		-ms-transform: rotateY(-135deg);
	}
	30% {
		-ms-transform: rotateY(-90deg)rotateZ(135deg); 
	}
	45% {
		-ms-transform: rotateY(225deg)rotateZ(135deg);
	}
	60% {
		-ms-transform: rotateY(135deg)rotateX(135deg);
	}
	75% {
		-ms-transform: rotateX(135deg)rotateY(225deg);
	}
	90% {
		-ms-transform: rotateX(-135deg);
	}
	100%{
		-ms-transform: rotate(0deg);
	}
}
/*设置兼容谷歌的动画*/
@keyframes rotate {
	15% {
		transform: rotateY(-135deg);
	}
	30% {
		transform: rotateY(-90deg)rotateZ(135deg); 
	}
	45% {
		transform: rotateY(225deg)rotateZ(135deg);
	}
	60% {
		transform: rotateY(135deg)rotateX(135deg);
	}
	75% {
		transform: rotateX(135deg)rotateY(225deg);
	}
	90% {
		transform: rotateX(-135deg);
	}
	100%{
		transform: rotate(0deg);
	}
}
/*@keyframes rotate {
    from,
    to {}
    15% {
        transform: rotateY(-135deg);
    }
    30% {
        transform: rotateY(-90deg)rotateZ(135deg);
    }
    45% {
        transform: rotateY(225deg)rotateZ(135deg);
    }
    60% {
        transform: rotateY(135deg)rotateX(135deg);
    }
    75% {
        transform: rotateX(135deg)rotateY(225deg);
    }
    90% {
        transform: rotateX(-135deg);
    }
}*/
